<template>
  <div class="left-two" :style="{ height: height + 'px' }">
    <out-line :height="height">
      <div>
        <div class="module-title">
          <div class="left">
            <div class="text">街镇数据</div>
            <!-- <img class="pic" src="@/assets/images/mtitle.png" /> -->
          </div>
          <div class="tab-titles">
            <div v-for="(tab, index) in tabs" :key="index" :class="{'active': activeTab === index}" @click="changeTab(index)">
              {{ tab.title }}
            </div>
          </div>
        </div>
        <div class="tab-content">
          <div v-show="activeTab === 0">
            <!-- <div id="scroll_in2" class="scroll_in" :style="{ height: scrollHeight + 'px' }"> -->
            <ul class="list">
              <li>
                <div class="title">
                  <span>韩店街道办</span>
                </div>
                <div class="quantity">10</div>
              </li>
              <li>
                <div class="title">
                  <span>苏店镇</span>
                </div>
                <div class="quantity">20</div>
              </li>
              <li>
                <div class="title">
                  <span>荫城镇</span>
                </div>
                <div class="quantity">30</div>
              </li>
              <li>
                <div class="title">
                  <span>西火镇</span>
                </div>
                <div class="quantity">30</div>
              </li>
              <li>
                <div class="title">
                  <span>八义镇</span>
                </div>
                <div class="quantity">30</div>
              </li>

            </ul>
            <!-- </div> -->

            <!-- <ul class="list">
              <li>
                <div class="title">
                  <img class="title-icon" src="@/assets/images/blocate1.png" alt="养老院">
                  <span>养老院</span>
                </div>
                <div class="quantity">10</div>
              </li>
              <li>
                <div class="title">
                  <img class="title-icon" src="@/assets/images/blocate2.png" alt="日间照料中心">
                  <span>日间照料中心</span>
                </div>
                <div class="quantity">20</div>
              </li>
              <li>
                <div class="title">
                  <img class="title-icon" src="@/assets/images/blocate3.png" alt="社区服务中心">
                  <span>社区服务中心</span>
                </div>
                <div class="quantity">30</div>
              </li>
            </ul> -->
          </div>
          <div v-show="activeTab === 1">
            <barChart1 v-if="activeTab === 1"></barChart1>
            <!-- 柱状图内容 -->
          </div>
          <div v-show="activeTab === 2">
            <!-- 饼状图内容 -->
            <pieChart1 v-if="activeTab === 2"></pieChart1>
          </div>
        </div>
      </div>
    </out-line>
  </div>
</template>

<script>
export default {
  props: {
    height: {
      type: Number,
      required: true
    }
  },
  components: {
    pieChart1: () => import('@/components/koi/right/pieChart1.vue'),
    barChart1: () => import('@/components/koi/right/barChart1.vue'),

  },
  data() {
    return {

      // isScrolling: true,
      activeTab: 0,
      tabs: [
        { title: '数据' },
        { title: '柱状图' },
        { title: '饼状图' }
      ]
    };
  },
  computed: {
    scrollHeight() {
      return this.height - 70
    }
  },
  mounted() {
    // this.autoSroll("scroll_in2");
  },
  beforeDestroy() {

  },
  methods: {
    changeTab(index) {
      this.activeTab = index;
    },
    autoSroll(Id) {
      // flag 为true时停止滚动
      var flag = false;
      // 定时器
      var timer;
      function roll() {
        var h = -1;
        timer = setInterval(function () {
          flag = true;
          //获取当前滚动条高度
          var current = document.getElementById(Id).scrollTop;
          if (current == h) {
            //滚动到底端,返回顶端
            h = 0;
            document.getElementById(Id).scrollTop = h + 1;
          } else {
            //以25ms/3.5px的速度滚动
            h = current;
            document.getElementById(Id).scrollTop = h + 1;
          }
        }, 50);
      }
      // setTimeout(function() {
      //滚动区域内鼠标划过 滚动暂停 鼠标划出 继续滚动
      document.getElementById(Id).onmouseover = () => {
        // console.log("onmouseover", timer, flag);
        flag = false;
        clearInterval(timer);
      };
      document.getElementById(Id).onmouseout = () => {
        console.log("onmouseout", timer, flag);
        flag = true;
        roll();
      };
      roll();
      // }, 2000);
    },

  }
};
</script>
<style lang="less" scoped>
.scroll_in {
  overflow: hidden;
}
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #fff;
}

.list li {
  display: flex;
  align-items: center;
  padding: 6px 10px;
}

.list li:nth-child(even) {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.list li:hover {
  background-color: #006afb;
  opacity: 1;
}

.title {
  display: flex;
  align-items: center;
}

.title img {
  margin-right: 10px;
  width: 10px;
}

.quantity {
  margin-left: auto;
}
@media screen and (max-width: 1026px) {
  .title {
    font-size: 14px;
  }
}
</style>


